<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="Canvas
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。&amp;lt;canvas&amp;gt; 元素是WhatWG W">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="zzz"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>zzz - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>zzz</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2017-08-31
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <h1 id="Canvas"><a href="#Canvas" class="headerlink" title="Canvas"></a>Canvas</h1><blockquote>
<p>canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。<br>基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<br>&lt;canvas&gt; 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。  </p>
</blockquote>
<h3 id="体验Canvas"><a href="#体验Canvas" class="headerlink" title="体验Canvas"></a>体验Canvas</h3><h4 id="什么是Canvas？"><a href="#什么是Canvas？" class="headerlink" title="什么是Canvas？"></a>什么是Canvas？</h4><p>HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。<br>画布是一个矩形区域，您可以控制其每一像素。<br>canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</p>
<h4 id="创建Canvas元素"><a href="#创建Canvas元素" class="headerlink" title="创建Canvas元素"></a>创建Canvas元素</h4><p>向 HTML5 页面添加 canvas 元素。<br>规定元素的 id、宽度和高度：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"myCanvas"</span> <span class="attr">width</span>=<span class="string">"200"</span> <span class="attr">height</span>=<span class="string">"100"</span>&gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></div></pre></td></tr></table></figure></p>
<h4 id="Canvas坐标系"><a href="#Canvas坐标系" class="headerlink" title="Canvas坐标系"></a>Canvas坐标系</h4><p><img src="images/location.jpg" alt=""></p>
<h4 id="通过JavaScript来绘制"><a href="#通过JavaScript来绘制" class="headerlink" title="通过JavaScript来绘制"></a>通过JavaScript来绘制</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*获取元素*/</span></div><div class="line"><span class="keyword">var</span> myCanvas = <span class="built_in">document</span>.querySelector(<span class="string">'#myCanvas'</span>);</div><div class="line"><span class="comment">/*获取绘图工具*/</span></div><div class="line"><span class="keyword">var</span> context = myCanvas.getContext(<span class="string">'2d'</span>);</div><div class="line"><span class="comment">/*设置绘图的起始位置*/</span></div><div class="line">context.moveTo(<span class="number">100</span>,<span class="number">100</span>);</div><div class="line"><span class="comment">/*绘制路径*/</span></div><div class="line">context.lineTo(<span class="number">200</span>,<span class="number">200</span>);</div><div class="line"><span class="comment">/*描边*/</span></div><div class="line">context.stroke();</div></pre></td></tr></table></figure>
<h3 id="Canvas的基本使用"><a href="#Canvas的基本使用" class="headerlink" title="Canvas的基本使用"></a>Canvas的基本使用</h3><h4 id="图形绘制"><a href="#图形绘制" class="headerlink" title="图形绘制"></a>图形绘制</h4><p>需要理解些概念：  </p>
<ul>
<li>路径的概念</li>
<li>路径的绘制<ul>
<li>描边 stroke()  </li>
<li>填充 fill()<br><img src="images/path.jpg" alt="">  </li>
</ul>
</li>
<li>闭合路径<ul>
<li>手动闭合</li>
<li>程序闭合 closePath()</li>
</ul>
</li>
<li>填充规则(非零环绕)<br><img src="images/zero.jpg" alt=""></li>
<li>开启新的路径 beginPath()</li>
</ul>
<h4 id="设置样式"><a href="#设置样式" class="headerlink" title="设置样式"></a>设置样式</h4><ul>
<li>画笔的状态<ul>
<li>lineWidth 线宽，默认1px</li>
<li>lineCap 线末端类型：(butt默认)、round、square </li>
<li>lineJoin 相交线的拐点 miter(默认)、round、bevel</li>
<li>strokeStyle 线的颜色</li>
<li>fillStyle 填充颜色</li>
<li>setLineDash() 设置虚线</li>
<li>getLineDash() 获取虚线宽度集合</li>
<li>lineDashOffset 设置虚线偏移量（负值向右偏移）</li>
</ul>
</li>
</ul>
<h4 id="实例练习"><a href="#实例练习" class="headerlink" title="实例练习"></a>实例练习</h4><ul>
<li>渐变色绘制</li>
<li>镂空的房子</li>
<li>绘制坐标网格</li>
<li>绘制坐标系</li>
<li>绘制坐标点</li>
<li>绘制折线图</li>
</ul>
<h4 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h4><ul>
<li><a href="http://www.w3school.com.cn/tags/html_ref_canvas.asp" target="_blank" rel="external">w3school</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial" target="_blank" rel="external">Canvas_API</a></li>
</ul>
<h3 id="Canvas图形绘制"><a href="#Canvas图形绘制" class="headerlink" title="Canvas图形绘制"></a>Canvas图形绘制</h3><h4 id="矩形绘制"><a href="#矩形绘制" class="headerlink" title="矩形绘制"></a>矩形绘制</h4><ul>
<li>rect(x,y,w,h) 没有独立路径</li>
<li>strokeRect(x,y,w,h) 有独立路径，不影响别的绘制</li>
<li>fillRect(x,y,w,h) 有独立路径，不影响别的绘制</li>
<li>clearRect(x,y,w,h) 擦除矩形区域</li>
</ul>
<h4 id="圆弧绘制"><a href="#圆弧绘制" class="headerlink" title="圆弧绘制"></a>圆弧绘制</h4><ul>
<li>弧度概念</li>
<li>arc()<ul>
<li>x 圆心横坐标</li>
<li>y 圆心纵坐标</li>
<li>r 半径</li>
<li>startAngle 开始角度</li>
<li>endAngle 结束角度</li>
<li>anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）</li>
</ul>
</li>
</ul>
<h4 id="绘制文本"><a href="#绘制文本" class="headerlink" title="绘制文本"></a>绘制文本</h4><ul>
<li>ctx.font = ‘微软雅黑’ 设置字体</li>
<li>strokeText()</li>
<li>fillText(text,x,y,maxWidth)<ul>
<li>text 要绘制的文本</li>
<li>x,y 文本绘制的坐标（文本左下角）</li>
<li>maxWidth 设置文本最大宽度，可选参数</li>
</ul>
</li>
<li>ctx.textAlign文本水平对齐方式，相对绘制坐标来说的<ul>
<li>left</li>
<li>center</li>
<li>right</li>
<li>start 默认</li>
<li>end</li>
<li>direction属性css(rtl ltr) start和end于此相关<ul>
<li>如果是ltr,start和left表现一致</li>
<li>如果是rtl,start和right表现一致</li>
</ul>
</li>
</ul>
</li>
<li>ctx.textBaseline 设置基线（垂直对齐方式  ）<ul>
<li>top 文本的基线处于文本的正上方，并且有一段距离</li>
<li>middle 文本的基线处于文本的正中间</li>
<li>bottom 文本的基线处于文本的证下方，并且有一段距离</li>
<li>hanging 文本的基线处于文本的正上方，并且和文本粘合</li>
<li>alphabetic 默认值，基线处于文本的下方，并且穿过文字</li>
<li>ideographic 和bottom相似，但是不一样</li>
</ul>
</li>
<li>measureText() 获取文本宽度obj.width</li>
</ul>
<h4 id="实例练习-1"><a href="#实例练习-1" class="headerlink" title="实例练习"></a>实例练习</h4><ul>
<li>绘制扇形</li>
<li>绘制圆角矩形</li>
<li>绘制圆</li>
<li>绘制饼图</li>
</ul>
<h3 id="做动画"><a href="#做动画" class="headerlink" title="做动画"></a>做动画</h3><h4 id="绘制图片"><a href="#绘制图片" class="headerlink" title="绘制图片"></a>绘制图片</h4><ul>
<li>drawImage()<ul>
<li>三个参数drawImage(img,x,y)<ul>
<li>img 图片对象、canvas对象、video对象</li>
<li>x,y 图片绘制的左上角</li>
</ul>
</li>
<li>五个参数drawImage(img,x,y,w,h)<ul>
<li>img 图片对象、canvas对象、video对象</li>
<li>x,y 图片绘制的左上角</li>
<li>w,h 图片绘制尺寸设置(图片缩放，不是截取)</li>
</ul>
</li>
<li>九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)<ul>
<li>img 图片对象、canvas对象、video对象</li>
<li>x,y,w,h 图片中的一个矩形区域</li>
<li>x1,y1,w1,h1 画布中的一个矩形区域</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="序列帧动画"><a href="#序列帧动画" class="headerlink" title="序列帧动画"></a>序列帧动画</h4><ul>
<li>绘制精灵图</li>
<li>动起来</li>
<li>控制边界</li>
<li>键盘控制</li>
</ul>
<h4 id="坐标变换"><a href="#坐标变换" class="headerlink" title="坐标变换"></a>坐标变换</h4><ul>
<li>平移 移动画布的原点<ul>
<li>translate(x,y) 参数表示移动目标点的坐标</li>
</ul>
</li>
<li>缩放<ul>
<li>scale(x,y) 参数表示宽高的缩放比例</li>
</ul>
</li>
<li>旋转<ul>
<li>rotate(angle) 参数表示旋转角度</li>
</ul>
</li>
</ul>
<h3 id="flappybird小游戏"><a href="#flappybird小游戏" class="headerlink" title="flappybird小游戏"></a>flappybird小游戏</h3><h4 id="小游戏开发步骤"><a href="#小游戏开发步骤" class="headerlink" title="小游戏开发步骤"></a>小游戏开发步骤</h4><h4 id="绘制小鸟"><a href="#绘制小鸟" class="headerlink" title="绘制小鸟"></a>绘制小鸟</h4><h4 id="绘制小鸟下落"><a href="#绘制小鸟下落" class="headerlink" title="绘制小鸟下落"></a>绘制小鸟下落</h4><h4 id="绘制鸟头旋转"><a href="#绘制鸟头旋转" class="headerlink" title="绘制鸟头旋转"></a>绘制鸟头旋转</h4><h4 id="绘制小鸟上跳"><a href="#绘制小鸟上跳" class="headerlink" title="绘制小鸟上跳"></a>绘制小鸟上跳</h4><h4 id="控制多张图加载"><a href="#控制多张图加载" class="headerlink" title="控制多张图加载"></a>控制多张图加载</h4><h4 id="绘制天空"><a href="#绘制天空" class="headerlink" title="绘制天空"></a>绘制天空</h4><h4 id="绘制管道"><a href="#绘制管道" class="headerlink" title="绘制管道"></a>绘制管道</h4><h4 id="小游戏面向对象封装"><a href="#小游戏面向对象封装" class="headerlink" title="小游戏面向对象封装"></a>小游戏面向对象封装</h4><h4 id="路径判断"><a href="#路径判断" class="headerlink" title="路径判断"></a>路径判断</h4><ul>
<li>isPointInPath()</li>
<li>isPointInStroke()</li>
</ul>


                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2017 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>